<template>
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :center="true" title="输入字段设置(样本库登记)" :visible.sync="ConfigVisible" width="750px" style="padding:5px 5px 5px 5px" top="6vh">
        <div style="float:left;width:78%" class="Config">
            <vxe-table :data.sync="tableDataColumn" @current-change="currentChangeEvent"  :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true}" :mouse-config="{selected: true}" :select-config="selectConfig" :keyboard-config="keyConfig" height="450px" highlight-current-row highlight-hover-row ref="xTableColumn" resizable highlight-hover-column show-header-overflow="tooltip" show-overflow="tooltip" header-align="center" size="mini" border stripe width="600px">
                <vxe-table-column type="index" align="center" width="30px"></vxe-table-column>
                <vxe-table-column field="col_name" key="col_name" title="字段名称" width="80px"></vxe-table-column>
                <vxe-table-column field="col_label" key="col_label" title="提示文字" :edit-render="{name: 'input', autoselect: true}" width="80px"></vxe-table-column>
                <vxe-table-column field="default_val" key="default_val" title="默认值" :edit-render="{name: 'input', autoselect: true}" width="80px">
                    <template v-slot:edit="{row}">
                        <el-input v-model="row.default_val" v-if="row.col_code === 'lab_advice'" size="mini"></el-input>
                        <el-input v-model="row.default_val" v-else-if="row.col_code === 'pat_agestr'" size="mini"></el-input>
                        <el-input v-model="row.default_val" v-else-if="row.valuetype == '2'" size="mini" :ref="row.col_code"></el-input>
                        <el-date-picker v-model="row.default_val" v-else-if="row.valuetype === '7'" :inputable="true" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" size="mini" style="width:100%"></el-date-picker>
                        <el-input v-model="row.default_val" v-else-if="row.valuetype == '5'" @dblclick.native="inputdblEvent(row.col_code)" @change="inputChangeEvent($event, row.col_code)" @focus="Queryddl('SMP210_' + row.col_code)"  size="mini"></el-input>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="visibled" key="visibled" title="可见" width="30px" align="center">
                    <template v-slot="{row,rowIndex}">
                        <el-checkbox label="" v-model="row.visibled"></el-checkbox>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="enabled" key="enabled" title="可编辑" width="40px" align="center">
                    <template v-slot="{row,rowIndex}">
                        <el-checkbox label="" v-model="row.enabled"></el-checkbox>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="noedit" key="noedit" title="禁止双击" width="55px" align="center">
                    <template v-slot="{row,rowIndex}">
                        <el-checkbox label="" v-model="row.noedit"></el-checkbox>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="rem_last" key="rem_last" title="自动记忆" width="55px" align="center">
                    <template v-slot="{row,rowIndex}">
                        <el-checkbox label="" v-model="row.rem_last"></el-checkbox>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="col_code" key="col_code" title="字段代码" width="80px"></vxe-table-column>
            </vxe-table>
        </div>
        <div style="float:left;margin-left: 5px">
            <table>
                <tr>
                    <td style="text-align:left">
                        <el-button style="width:110px;margin-bottom: 5px" @click="SaveCol()">确定</el-button>
                    </td>
                </tr>
                <tr>
                    <td style="text-align:left">
                        <el-button style="width:110px;margin-bottom: 50px" @click="ConfigVisible=false">取消</el-button>
                    </td>
                </tr>
                <tr>
                    <td style="text-align:left">
                        <el-button style="width:110px;margin-bottom: 5px" @click="SetFirst($refs.xTableColumn)">首位</el-button>
                    </td>
                </tr>
                <tr>
                    <td style="text-align:left">
                        <el-button style="width:110px;margin-bottom: 5px" @click="SetUp($refs.xTableColumn)">上移</el-button>
                    </td>
                </tr>
                <tr>
                    <td style="text-align:left">
                        <el-button style="width:110px;margin-bottom: 5px" @click="SetDown($refs.xTableColumn)">下移</el-button>
                    </td>
                </tr>
                <tr>
                    <td style="text-align:left">
                        <el-button style="width:110px;margin-bottom: 5px" @click="SetLast($refs.xTableColumn)">末位</el-button>
                    </td>
                </tr>
                <tr>
                    <td style="text-align:left">
                        <el-button style="width:110px;margin-bottom: 5px" @click="resort($refs.xTableColumn)">默认顺序</el-button>
                    </td>
                </tr>
                <!-- <tr>
                        <td style="text-align:left">
                            <el-button style="width:110px;margin-bottom: 5px">列表字段调整</el-button>
                        </td>
                    </tr> -->
                <!-- <tr>
                        <td style="text-align:left;">
                            <div style="margin-top: 20px">文字大小</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-select v-model="ConfigDetail[ConfigDetail.tab_length-1]">
                                <el-option label="小" value="1"></el-option>
                                <el-option label="中" value="2"></el-option>
                                <el-option label="大" value="3"></el-option>
                                <el-option label="超大" value="4"></el-option>
                            </el-select>
                        </td>
                    </tr> -->
                <!--<tr>
                        <td style="text-align:left">
                            <el-checkbox>自动记忆样式</el-checkbox>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:left">行间距</td>
                    </tr>
                    <tr>
                        <td>
                            <el-input-number v-model="rowdistance" controls-position="right" :min="1" :max="1000"></el-input-number>
                        </td>
                    </tr>-->
            </table>

        <div class="footer">
        </div>
        <div class="footer">
        </div>
        <div class="footer">
        </div>
        </div>
         <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="poptitle" :visible.sync="dialogTableVisible" v-if="dialogTableVisible" ref="popcommondialog">
            <rm-pop-common @cancel="dialogTableVisible=false" :datatype="popdatatype" :rptunitid="librid" @change="popchange" ref="popcommon"></rm-pop-common>
            <!--SMP210_xxx-->
        </el-dialog>
    </el-dialog>

</template>


<script>
import XE from "xe-utils";
export default {
  name: "rmElementConfig",
  props: ["librid", "tableDataColumn", "ConfigDetail"],
  data() {
      return {
          //列配置弹出框
          ConfigVisible: false, //列配置显示标志
          rowdistance: 1, //行间距
          labelsize: "0", //字体大小
          selectConfig: { tigger: "row" }, //vxe表格选中方式
          keyConfig: {
              isDel: true,
              isTab: true,
              isEdit: true
          }, //vxe表格键盘事件
          currentindex: 0,
          //输入字段控件双击弹窗显示
          dialogTableVisible: false,
          //输入字段代码数组
          InputCodeArr: [],
          popdatatype: "SMP210_charge_typeno",
      };
  },
  created() {},
  methods: {
      currentChangeEvent({ row }) {
          this.currentindex = this.$refs.xTableColumn.getRowIndex(row);
      },
      SetFirst(table) {
          if (table.getCurrentRow()) {
              var currentrow = table.getCurrentRow();
              table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
              table.tableData.splice(0, 0, currentrow);
              this.currentindex = 0;
              this.$nextTick(() => {
                  table.setCurrentRow(currentrow);
                  table.scrollToRow(currentrow);
              });
          }
      },
      SetUp(table) {
          if (this.currentindex > 0) {
              var currentrow = table.getCurrentRow();
              table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
              table.tableData.splice(this.currentindex - 1, 0, currentrow);
              this.currentindex -= 1;
              this.$nextTick(() => {
                  table.setCurrentRow(currentrow);
                  table.scrollToRow(currentrow);
              });
          }
      },
      SetDown(table) {
          if (this.currentindex >= 0 && this.currentindex < table.tableData.length - 1) {
              var currentrow = table.getCurrentRow();
              table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
              table.tableData.splice(this.currentindex + 1, 0, currentrow);
              this.currentindex += 1;
              this.$nextTick(() => {
                  table.setCurrentRow(currentrow);
                  table.scrollToRow(currentrow);
              });
          }
      },
      SetLast(table) {
          if (table.getCurrentRow()) {
              var currentrow = table.getCurrentRow();
              table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
              table.tableData.push(currentrow);
              this.currentindex = table.tableData.length - 1;
              this.$nextTick(() => {
                  table.setCurrentRow(currentrow);
                  table.scrollToRow(currentrow);
              });
          }
      },
      resort(table) {
          var reg = new RegExp("[0-9]{1,}", "gi");
          var row = table.getCurrentRow();
          table.tableData.sort((a, b) => a._XID.match(reg) - 0 - (b._XID.match(reg) - 0));
          this.$nextTick(() => {
              table.setCurrentRow(row);
              this.currentindex = table.getRowIndex(row);
          });
      },
      SaveCol() {
          var coldata = XE.clone(this.$refs.xTableColumn.tableData, true);
          // var pageseting = "";
          // for (let i = 0; i < this.ConfigDetail.tab_length - 1; i++) {
          //     if (this.ConfigDetail[i]) pageseting += "1,";
          //     else pageseting += "0,";
          // }
          // pageseting += this.ConfigDetail[this.ConfigDetail.tab_length - 1];
          this.$tool
              .request({
                  url: "SMP/SMP2/SMP210",
                  method: "post",
                  data: {
                      action: "saveinputcol",
                      cols: coldata,
                      librid: this.librid,
                      pageseting: this.ConfigDetail
                  }
              })
              .then(res => {
                  if (res.Item1 == 1) {
                      this.$message({
                          type: "success",
                          message: "保存成功!"
                      });
                      this.ConfigVisible = false;
                      // this.$parent.GetOptions(this.library).then(r => {
                      //     this..$parent.QueryCol();
                      // });
                      console.log(this.$parent);
                      //this.$parent.$parent.QueryCol();
                      this.$emit("QueryCol");
                  } else {
                      this.$message.error("错误:" + res.Item2);
                  }
              })
              .catch(error => {
                  this.$message.error("错误:" + error);
              });
      },
      OpenConfig() {
          this.ConfigVisible = true;
          this.$nextTick(() => {
              // this.$refs.xTableColumn.setCurrentRow(this.$refs.xTableColumn.getData(0));
              // this.currentindex = 0;
              this.$refs.xTableColumn.loadData(this.tableDataColumn).then(() => {
                  this.$refs.xTableColumn.setCurrentRow(this.$refs.xTableColumn.getData(0));
                  this.currentindex = 0;
              });
          });
      },
      //input输入框双击事件
      inputdblEvent(colcode) {
          this.popdatatype = "SMP210_" + colcode;
          let selitem = this.tableDataColumn.find(item => item.col_code == colcode);
          if (selitem) this.poptitle = selitem.col_name;
          else this.poptitle = "";
          this.dialogTableVisible = true;
      },
      inputChangeEvent(val, colcode) {
          if (val == "") {
              var selitem = this.$refs.xTableColumn.tableFullData.find(item => item.col_code == colcode);
              console.log("index1", selitem);
              if (selitem) {
                  var index = this.$refs.xTableColumn.tableFullData.indexOf(selitem);
                  console.log("index", index);
                  this.$refs.xTableColumn.tableFullData[index].default_val = "";
                  this.$refs.xTableColumn.tableFullData[index].default_valname = "";
              }
              this.$emit("configDefChange", { row: "", colcode: colcode });
          }
      },
      Queryddl(colcode) {
          if (!this.InputCodeArr.find(item => item.key == colcode)) {
              this.$tool
                  .request({
                      url: "ucent/ddl",
                      method: "post",
                      data: {
                          action: colcode,
                          librid: this.librid
                      }
                  })
                  .then(res => {
                      if (!res.hasOwnProperty("errcode")) {
                          this.InputCodeArr.push({ key: colcode, list: res });
                      }
                  });
          }
      },
      headerdblCellClickEvent({ column }) {
          // if (this.$refs.xTableColumn.tableFullData.length > 0) {
          //     var rowdata = this.$refs.xTableColumn.tableFullData[0];
          //     for (let i = 0; i < this.$refs.xTableColumn.tableFullData.length; i++) {
          //         this.$refs.xTableColumn.tableFullData[i][column.property] = rowdata[column.property];
          //     }
          // }
      },
       popchange(c, v, row) {
          var data = this.tableDataColumn;
          var colcode = this.popdatatype.replace("SMP210_", "");
          let selitem = data.find(item => item.col_code == colcode);
          if (selitem) {
              this.$emit("configDefChange", { row: row, colcode: colcode });
          }
          this.dialogTableVisible = false;
      },
  }
};
</script>
<style scoped>
/* table tr td:nth-child(odd) {
  text-align: right;
  white-space: nowrap;
}
table tr td:nth-child(even) {
  text-align: left;
}
table tr td:nth-child(1) {
  width: 80px;
} */
table {
  font-size: 12px;
  border-collapse: separate;
  /* border-spacing: 5px; */
}
/* 底部样式 */
.footer {
height: 80px;
/* padding: 10px; */
}
::v-deep .processingcls td {
  color: #1087ba;
}
::v-deep .errocls td {
  color: red;
}
::v-deep .erroalreadyread td {
  color: #0a5fb4;
}
.barcoderunning::-webkit-input-placeholder {
  color: #ff0000;
}
::v-deep  .parent-row .vxe-cell {
  width: 100% !important;
}
.parent-row-name {
  display: inline-block;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
}
.top-sample-info {
  font-weight: bold;
  font-size: 13px;
  margin-right: 30px;
}
</style>
